<template>
    <view class="xilu">
        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
            <view class="container plr30 pt30">
                <view class="pb10" v-for="(item,index) in footerDateList">
                    <view class="fs34 col10 pb20">{{item}}</view>
                    <view class="flex-box flex-wrap">
                        <view class="xilu_browse_item" v-for="(items,indexs) in footerDateMapList[item]" @click="productDetail(item.type,items.footer_id)">
                            <image :src="items.product.thumb_image_text" mode="aspectFill"></image>
                            <view class="red fs34"><text class="fs24">¥</text>{{items.product.salesprice}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    export default {
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
				footerList:[],
				footerDateList:[],
				footerDateMapList:{}
            };
        },
        methods: {
            /*上拉加载的回调*/
            upCallback(page) {
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
				this.$core.get({url: 'xilumarket.user/footer_view',loading:false,data:{page: pageNum,pageSize:pageSize},success: (ret) => {
						let data = ret.data;
						// 接口返回的当前页数据列表 (数组)
						let curPageData = data.data;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						let totalPage = data.last_page;
						//设置列表数据
						if (page.num == 1) this.footerLists = []; //如果是第一页需手动置空列表
						this.footerLists = this.footerLists.concat(curPageData); //追加新数据
						
						let footerDateList = this.footerDateList;
						curPageData.forEach(item=>{
							let viewDate = this.$util.formatDatetime(item.view_time,'yyyy年m月d日');
							if(footerDateList.indexOf(viewDate) === -1){
								footerDateList.push(viewDate);
							}
							
							let footerList = this.footerDateMapList[viewDate] || [];
							footerList.push(item);
							this.footerDateList = footerDateList;
							this.footerDateMapList[viewDate] = footerList;
						})
						//console.log(this.footerDateMapList)
						// 请求成功,隐藏加载状态
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						this.mescroll.endByPage(curPageLen, totalPage);
				
						
						setTimeout(() => {
							this.mescroll.endSuccess(curPageLen)
						}, 20)
					},
					fail: () => {
						//  请求失败,隐藏加载状态
						this.mescroll.endErr()
					}
				})
			},
			productDetail(type,id){
				uni.navigateTo({
					url: '/pages/goods_detail/goods_detail?id='+id
				})
			}
			
        }
    }
</script>

<style lang="scss" scoped>
    .xilu {
        &_avatar {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            margin-right: 30rpx;
        }

        &_browse_item {
            width: 220rpx;
            margin-right: 15rpx;
            margin-bottom: 30rpx;

            &:nth-of-type(3n) {
                margin-right: 0;
            }

            image {
                width: 220rpx;
                height: 220rpx;
                border-radius: 10rpx;
            }
        }
    }
</style>
